<template>
    <div :style="{width:'100%',height:'300px'}" ref="chartRef" class="chart-box"></div>
</template>

<script setup>

import { ref,defineProps, watch, onMounted } from 'vue';
import * as echarts  from 'echarts' 

const props = defineProps({
    chartType:{
        default:'bar'
    },
    options:{
        default:()=>({})
    }
})

const chartRef=ref(null)
let chartInit =null

watch(
    ()=>props.options,
    ()=>{
        if(chartInit){
            chartInit.setOption(props.options)
        }
    }

)

console.log(chartRef);



const initChart =()=>{
    chartInit = echarts.init(chartRef.value)
    chartInit.setOption({
        ...props.options,
        series:[
            {
                type:props.chartType,
                data:props.options.series && props.options.series[0].data
            }
        ]
    })
}


onMounted(()=>{
    initChart()
})


</script>

<style lang="less">


</style>